<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: url(images/bg.jpg) no-repeat center center/cover;
        margin: 20px auto;
        position: relative;
      }
      #second {
        width: 2px;
        height: 110px;
        background: pink;
        position: absolute;
        left: 50%;
        bottom: 50%;
        border-radius: 50%;
        transform: rotate(0deg);
        transform-origin: center bottom;
      }
      #mins {
        width: 2px;
        height: 95px;
        background: palevioletred;
        position: absolute;
        border-radius: 50%;
        left: 50%;
        bottom: 50%;
        transform: rotate(0deg);
        transform-origin: center bottom;
      }
      #hours {
        position: absolute;
        width: 2px;
        height: 80px;
        border-radius: 50%;
        background: wheat;
        left: 50%;
        bottom: 50%;
        transform: rotate(0deg);
        transform-origin: center bottom;
      }
  
            /* ul{
                position: relative;
            }
            ul li{
                width: 2px;
                height: 6px;
                background: #000;
                position: absolute;
                left: 99px;
                top: 0;
                transform-origin: center top;
            }
             ul li:nth-child(5n){
                height: 10px;
            } */

    </style>
  </head>
  <body>
    <div>
        <ul id="list">

        </ul>
      <p id="second"></p>
      <p id="mins"></p>
      <p id="hours"></p>
     </p>
      <script>
        var secEle = document.getElementById("second");  // 秒针
        var minEle = document.getElementById("mins"); // //分针
        var hEle = document.getElementById("hours");//时针
        //1.获取盒子数据 2.获取时间数据 3.算出移动的deg给盒子设置上 4.首先执行一次函数movesecond()让盒子指向该指的位置 5.setInterval间隔重复执行移动指令
        function moves() {
          var time = new Date();
          var a = time.getSeconds();
          var deg = 6 * a;
          var b = time.getMinutes();
          var degb =6 * b+a/10;
          var c = time.getHours();
          var degc = 30 * c+degb/12;
          //秒针移动的时候 分针也移动
         
          secEle.style.transform = `rotate(${deg}deg)`;
          minEle.style.transform = `rotate(${degb}deg)`;
          hEle.style.transform = `rotate(${degc}deg)`;
          
        }
        moves();//先执行一次将度数移动到现在的位置
        setInterval(function () {
          moves();
        }, 1000);
        //每间隔一秒获取一下当前时针分针秒针的数据 并根据当前数据调整对应应该旋转的度数
     
      </script>
  </body>
</html>
